﻿<script setup lang="ts" name="EpFeedback">
import error404 from '@/assets/404.png'
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认要关闭这个对话框吗？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const open1 = () => {
  ElMessageBox.alert('模拟系统弹窗框的弹出信息', '有新消息！', {
    showCancelButton: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    callback: (action) => {
      if (action === 'confirm') {
        ElMessage({
          type: 'info',
          message: `操作: 点击了确认`
        })
      } else {
        ElMessage({
          type: 'info',
          message: `操作: 点击了取消`
        })
      }
    }
  })
}
</script>
<template>
  <div>
    <el-space :size="systemConfig.space" fill>
      <el-row>
        <el-col>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>反馈组件</span>
              </div>
            </template>
            <el-form>
              <el-form-item>
                <el-button type="primary" :plain="true" @click="dialogVisible = true">打开对话框</el-button>
                <el-button type="primary" :plain="true" @click="open1">打开消息弹出框</el-button>
                <el-popconfirm confirm-button-text="确认" cancel-button-text="不，谢谢" icon="InfoFilled" icon-color="red" title="确认删除此条信息吗？">
                  <template #reference>
                    <el-button type="primary" :plain="true">汽包确认消息框</el-button>
                  </template>
                </el-popconfirm>
                <el-popover placement="bottom" title="提示：" :width="200" trigger="hover" content="这里是信息提示，该提示可以通过点击形式展现">
                  <template #reference>
                    <el-button type="primary" :plain="true">信息提示弹出框</el-button>
                  </template>
                </el-popover>
                <el-tooltip effect="dark" content="文字提示信息" placement="right">
                  <el-button type="primary" :plain="true">文字提示</el-button>
                </el-tooltip>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="systemConfig.space">
        <el-col :sm="12" :lg="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>信息结果反馈</span>
              </div>
            </template>
            <el-result icon="info" title="信息提示">
              <template #sub-title>
                <p>请根据提示进行操作</p>
              </template>
              <template #extra>
                <el-button type="primary">返回</el-button>
              </template>
            </el-result>
          </el-card>
        </el-col>
        <el-col :sm="12" :lg="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>成功结果反馈</span>
              </div>
            </template>
            <el-result icon="success" title="成功提示" sub-title="请根据提示进行操作">
              <template #extra>
                <el-button type="primary">返回</el-button>
              </template>
            </el-result>
          </el-card>
        </el-col>
        <el-col :sm="12" :lg="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>警告结果反馈</span>
              </div>
            </template>
            <el-result icon="warning" title="警告提示" sub-title="请根据提示进行操作">
              <template #extra>
                <el-button type="primary">返回</el-button>
              </template>
            </el-result>
          </el-card>
        </el-col>
        <el-col :sm="12" :lg="6">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>错误结果反馈</span>
              </div>
            </template>
            <el-result icon="error" title="错误提示" sub-title="请根据提示进行操作">
              <template #extra>
                <el-button type="primary">返回</el-button>
              </template>
            </el-result>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="systemConfig.space">
        <el-col :sm="12" :lg="12">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>自定义结果反馈</span>
              </div>
            </template>
            <el-result title="404">
              <template #icon>
                <el-image :src="error404" style="width: 200px;" />
              </template>
              <template #sub-title>
                <p>请根据提示进行操作</p>
              </template>
              <template #extra>
                <el-button type="primary">返回</el-button>
              </template>
            </el-result>
          </el-card>
        </el-col>
        <el-col :sm="12" :lg="12">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>空数据结果反馈</span>
              </div>
            </template>
            <el-empty description="暂无数据" :image-size="200">
              <el-button type="primary">返回</el-button>
            </el-empty>
          </el-card>
        </el-col>
      </el-row>
    </el-space>
    <el-dialog v-model="dialogVisible" title="对话框" width="30%" :before-close="handleClose">
      <span>对话框框信息</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}
</style>
